<!DOCTYPE html>
<html lang="en">

<head>
    <title>答题记录</title>
    <meta charset="UTF-8">
    <style>
        body {
            background: url('../images/vmbg2.png') center/cover no-repeat fixed; /* 使用背景图像 */
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
<div id="tableContainer"></div>
<script src="../util/axios.min.js"></script>
<script>
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        config.headers.token = localStorage.getItem("token")
        // 在发送请求之前做些什么
        return config;
    });
    axios({
        method: 'GET',
        url: 'http://localhost:8080/answerRecord/answerRecordList',
    }).then((resp)=>{
        if (resp.data.code===200){
          const data=resp.data.data
            const tableContainer = document.getElementById("tableContainer");

            const table = document.createElement("table");
            const thead = document.createElement("thead");
            const tbody = document.createElement("tbody");

            // 设置表头
            const tableHeadings = ["题目ID","题目内容", "你的答案", "正确答案", "提交时间"];
            const headingRow = document.createElement("tr");
            tableHeadings.forEach((headingText) => {
                const th = document.createElement("th");
                th.textContent = headingText;
                headingRow.appendChild(th);
            });
            thead.appendChild(headingRow);

            // 设置表格内容
            data.forEach((rowData) => {
                const row = document.createElement("tr");
                const {
                    questionId,
                    questionContent,
                    userAnswer,
                    trueAnswer,
                    submitTime,
                } = rowData;

                const questionIdCell = document.createElement("td");
                questionIdCell.textContent = questionId;
                row.appendChild(questionIdCell);
                const questionContentCell = document.createElement("td");
                questionContentCell.textContent = questionContent;
                row.appendChild(questionContentCell);

                const userAnswerCell = document.createElement("td");
                userAnswerCell.textContent = userAnswer;
                row.appendChild(userAnswerCell);

                const trueAnswerCell = document.createElement("td");
                trueAnswerCell.textContent = trueAnswer;
                row.appendChild(trueAnswerCell);

                const submitTimeCell = document.createElement("td");
                submitTimeCell.textContent = submitTime;
                row.appendChild(submitTimeCell);

                tbody.appendChild(row);
            });

            table.appendChild(thead);
            table.appendChild(tbody);

            tableContainer.appendChild(table);
        }
    });

</script>
</body>

</html>
